<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4401782" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">脚本</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">link2</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">unlink2</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">link-data</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">全部展开</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">全部收起</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">脱机</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe822;</span>
                <div class="name">socket-io</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77e;</span>
                <div class="name">测试用例</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">循环</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe812;</span>
                <div class="name">等待</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">分组</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ee;</span>
                <div class="name">条件</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe821;</span>
                <div class="name">backspace</div>
                <div class="code-name">&amp;#xe821;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">重命名</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">markdown</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">markdown</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe94c;</span>
                <div class="name">添加目录</div>
                <div class="code-name">&amp;#xe94c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">移动文件</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">重命名</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">导入项目</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">http接口</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">导入curl</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d0;</span>
                <div class="name">部门</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">api</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">项目权限</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">邀请</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">转移</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">团队</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">开发者</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">超级管理员</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">访客</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">项目文档</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">快捷分享</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b2;</span>
                <div class="name">取消链接</div>
                <div class="code-name">&amp;#xe9b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">超链接</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82e;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe82e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">数据库</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">接口</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xecb8;</span>
                <div class="name">自动化测试</div>
                <div class="code-name">&amp;#xecb8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98c;</span>
                <div class="name">云端链接</div>
                <div class="code-name">&amp;#xe98c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebb7;</span>
                <div class="name">自动生成</div>
                <div class="code-name">&amp;#xebb7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">正确</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">格式化</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">克隆</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">环境变量</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">折叠</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">权限管理</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">清空</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">CA证书</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">CA证书</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">checked</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">抓包</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">纸飞机</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">快捷键</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">16_外观设置</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">安全证书</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">插件管理</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">上下分屏</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">左右分屏</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">Cookies</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe864;</span>
                <div class="name">控制台</div>
                <div class="code-name">&amp;#xe864;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">目录</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe848;</span>
                <div class="name">angle- double-down</div>
                <div class="code-name">&amp;#xe848;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe849;</span>
                <div class="name">angle-double-up</div>
                <div class="code-name">&amp;#xe849;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84a;</span>
                <div class="name">angle-double-right</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84b;</span>
                <div class="name">angle-double-left</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">数据字典</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">网络</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec09;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xec09;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">权限管理</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">plane</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">icon-drag</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84c;</span>
                <div class="name">angle-down</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84d;</span>
                <div class="name">angle-up</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84e;</span>
                <div class="name">angle-right</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84f;</span>
                <div class="name">angle-left</div>
                <div class="code-name">&amp;#xe84f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ec;</span>
                <div class="name">eye-slash</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ed;</span>
                <div class="name">眼睛</div>
                <div class="code-name">&amp;#xe7ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f0;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fa;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe7fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fb;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe7fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81e;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81f;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe820;</span>
                <div class="name">强调</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe828;</span>
                <div class="name">减少</div>
                <div class="code-name">&amp;#xe828;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe829;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82a;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe82a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe843;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe843;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe844;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">chart-pie-alt</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f2;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe818;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81b;</span>
                <div class="name">cloud download</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81c;</span>
                <div class="name">cloud upload</div>
                <div class="code-name">&amp;#xe81c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81d;</span>
                <div class="name">exchange</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe827;</span>
                <div class="name">ban</div>
                <div class="code-name">&amp;#xe827;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe832;</span>
                <div class="name">external-link</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83a;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83b;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe83b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe845;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe845;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe846;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe846;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe850;</span>
                <div class="name">paperclip</div>
                <div class="code-name">&amp;#xe850;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe851;</span>
                <div class="name">connection</div>
                <div class="code-name">&amp;#xe851;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86e;</span>
                <div class="name">icon-drag</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">默认</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">从模版库选择</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82c;</span>
                <div class="name">响应模版</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">回收站</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">模型库</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">数据模型</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">项目</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">折叠全部</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">展开全部</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">grpc</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe735;</span>
                <div class="name">websocket</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">socket</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">web-socket</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe872;</span>
                <div class="name">Socket服务</div>
                <div class="code-name">&amp;#xe872;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">回收站</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">组件-图标</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e3;</span>
                <div class="name">UI自动化测试</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">笔记</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e7;</span>
                <div class="name">分支管理</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">接口管理</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">代理</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea41;</span>
                <div class="name">项目管理</div>
                <div class="code-name">&amp;#xea41;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">自动化测试</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">分享管理</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('iconfont.woff2?t=1734192914870') format('woff2'),
       url('iconfont.woff?t=1734192914870') format('woff'),
       url('iconfont.ttf?t=1734192914870') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-script"></span>
            <div class="name">
              脚本
            </div>
            <div class="code-name">.icon-script
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link2"></span>
            <div class="name">
              link2
            </div>
            <div class="code-name">.icon-link2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlink2"></span>
            <div class="name">
              unlink2
            </div>
            <div class="code-name">.icon-unlink2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link-data"></span>
            <div class="name">
              link-data
            </div>
            <div class="code-name">.icon-link-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-expand-all"></span>
            <div class="name">
              全部展开
            </div>
            <div class="code-name">.icon-expand-all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fold-all"></span>
            <div class="name">
              全部收起
            </div>
            <div class="code-name">.icon-fold-all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kefu"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-kefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-offline"></span>
            <div class="name">
              脱机
            </div>
            <div class="code-name">.icon-offline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-socket-io"></span>
            <div class="name">
              socket-io
            </div>
            <div class="code-name">.icon-socket-io
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-test-case"></span>
            <div class="name">
              测试用例
            </div>
            <div class="code-name">.icon-test-case
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loop"></span>
            <div class="name">
              循环
            </div>
            <div class="code-name">.icon-loop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wait"></span>
            <div class="name">
              等待
            </div>
            <div class="code-name">.icon-wait
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-group"></span>
            <div class="name">
              分组
            </div>
            <div class="code-name">.icon-group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-if"></span>
            <div class="name">
              条件
            </div>
            <div class="code-name">.icon-if
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-backspace"></span>
            <div class="name">
              backspace
            </div>
            <div class="code-name">.icon-backspace
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-export"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rename"></span>
            <div class="name">
              重命名
            </div>
            <div class="code-name">.icon-rename
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-markdown"></span>
            <div class="name">
              markdown
            </div>
            <div class="code-name">.icon-markdown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-markdown2"></span>
            <div class="name">
              markdown
            </div>
            <div class="code-name">.icon-markdown2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-add"></span>
            <div class="name">
              添加目录
            </div>
            <div class="code-name">.icon-folder-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-move"></span>
            <div class="name">
              移动文件
            </div>
            <div class="code-name">.icon-folder-move
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy1"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-copy1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              重命名
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-import-project"></span>
            <div class="name">
              导入项目
            </div>
            <div class="code-name">.icon-import-project
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-http"></span>
            <div class="name">
              http接口
            </div>
            <div class="code-name">.icon-http
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-import-curl"></span>
            <div class="name">
              导入curl
            </div>
            <div class="code-name">.icon-import-curl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-team2"></span>
            <div class="name">
              部门
            </div>
            <div class="code-name">.icon-team2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-api1"></span>
            <div class="name">
              api
            </div>
            <div class="code-name">.icon-api1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-project-role"></span>
            <div class="name">
              项目权限
            </div>
            <div class="code-name">.icon-project-role
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-invite"></span>
            <div class="name">
              邀请
            </div>
            <div class="code-name">.icon-invite
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-transfer"></span>
            <div class="name">
              转移
            </div>
            <div class="code-name">.icon-transfer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-team"></span>
            <div class="name">
              团队
            </div>
            <div class="code-name">.icon-team
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-developer"></span>
            <div class="name">
              开发者
            </div>
            <div class="code-name">.icon-developer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-administrator"></span>
            <div class="name">
              超级管理员
            </div>
            <div class="code-name">.icon-administrator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-visitor"></span>
            <div class="name">
              访客
            </div>
            <div class="code-name">.icon-visitor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-project"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-project
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-project-doc"></span>
            <div class="name">
              项目文档
            </div>
            <div class="code-name">.icon-project-doc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quick-share"></span>
            <div class="name">
              快捷分享
            </div>
            <div class="code-name">.icon-quick-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link-off"></span>
            <div class="name">
              取消链接
            </div>
            <div class="code-name">.icon-link-off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link"></span>
            <div class="name">
              超链接
            </div>
            <div class="code-name">.icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-database"></span>
            <div class="name">
              数据库
            </div>
            <div class="code-name">.icon-database
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-api"></span>
            <div class="name">
              接口
            </div>
            <div class="code-name">.icon-api
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-auto-test2"></span>
            <div class="name">
              自动化测试
            </div>
            <div class="code-name">.icon-auto-test2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloud-link"></span>
            <div class="name">
              云端链接
            </div>
            <div class="code-name">.icon-cloud-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flash-auto"></span>
            <div class="name">
              自动生成
            </div>
            <div class="code-name">.icon-flash-auto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-okay"></span>
            <div class="name">
              正确
            </div>
            <div class="code-name">.icon-okay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-format"></span>
            <div class="name">
              格式化
            </div>
            <div class="code-name">.icon-format
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clone"></span>
            <div class="name">
              克隆
            </div>
            <div class="code-name">.icon-clone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-enviroment"></span>
            <div class="name">
              环境变量
            </div>
            <div class="code-name">.icon-enviroment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-copy"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhedie"></span>
            <div class="name">
              折叠
            </div>
            <div class="code-name">.icon-zhedie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxianguanli"></span>
            <div class="name">
              权限管理
            </div>
            <div class="code-name">.icon-quanxianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clear"></span>
            <div class="name">
              清空
            </div>
            <div class="code-name">.icon-clear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-modify"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-modify
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ca2"></span>
            <div class="name">
              CA证书
            </div>
            <div class="code-name">.icon-ca2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ca1"></span>
            <div class="name">
              CA证书
            </div>
            <div class="code-name">.icon-ca1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-checked"></span>
            <div class="name">
              checked
            </div>
            <div class="code-name">.icon-checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-packet-capture"></span>
            <div class="name">
              抓包
            </div>
            <div class="code-name">.icon-packet-capture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plane2"></span>
            <div class="name">
              纸飞机
            </div>
            <div class="code-name">.icon-plane2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shortcut"></span>
            <div class="name">
              快捷键
            </div>
            <div class="code-name">.icon-shortcut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skins"></span>
            <div class="name">
              16_外观设置
            </div>
            <div class="code-name">.icon-skins
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-certificate"></span>
            <div class="name">
              安全证书
            </div>
            <div class="code-name">.icon-certificate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings3"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-settings3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plugins"></span>
            <div class="name">
              插件管理
            </div>
            <div class="code-name">.icon-plugins
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-vertical"></span>
            <div class="name">
              上下分屏
            </div>
            <div class="code-name">.icon-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-horizontal"></span>
            <div class="name">
              左右分屏
            </div>
            <div class="code-name">.icon-horizontal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cookies"></span>
            <div class="name">
              Cookies
            </div>
            <div class="code-name">.icon-cookies
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-terminal"></span>
            <div class="name">
              控制台
            </div>
            <div class="code-name">.icon-terminal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-directory"></span>
            <div class="name">
              目录
            </div>
            <div class="code-name">.icon-directory
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-double-down"></span>
            <div class="name">
              angle- double-down
            </div>
            <div class="code-name">.icon-angle-double-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-double-up"></span>
            <div class="name">
              angle-double-up
            </div>
            <div class="code-name">.icon-angle-double-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-double-right"></span>
            <div class="name">
              angle-double-right
            </div>
            <div class="code-name">.icon-angle-double-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-double-left"></span>
            <div class="name">
              angle-double-left
            </div>
            <div class="code-name">.icon-angle-double-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dictionary"></span>
            <div class="name">
              数据字典
            </div>
            <div class="code-name">.icon-dictionary
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-network"></span>
            <div class="name">
              网络
            </div>
            <div class="code-name">.icon-network
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-save"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-save2"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-save2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-key"></span>
            <div class="name">
              权限管理
            </div>
            <div class="code-name">.icon-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plane"></span>
            <div class="name">
              plane
            </div>
            <div class="code-name">.icon-plane
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sort"></span>
            <div class="name">
              icon-drag
            </div>
            <div class="code-name">.icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-down"></span>
            <div class="name">
              angle-down
            </div>
            <div class="code-name">.icon-angle-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-up"></span>
            <div class="name">
              angle-up
            </div>
            <div class="code-name">.icon-angle-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-right"></span>
            <div class="name">
              angle-right
            </div>
            <div class="code-name">.icon-angle-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-angle-left"></span>
            <div class="name">
              angle-left
            </div>
            <div class="code-name">.icon-angle-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye-slash"></span>
            <div class="name">
              eye-slash
            </div>
            <div class="code-name">.icon-eye-slash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye"></span>
            <div class="name">
              眼睛
            </div>
            <div class="code-name">.icon-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.icon-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-emphasize"></span>
            <div class="name">
              强调
            </div>
            <div class="code-name">.icon-emphasize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus"></span>
            <div class="name">
              减少
            </div>
            <div class="code-name">.icon-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart-pie-alt"></span>
            <div class="name">
              chart-pie-alt
            </div>
            <div class="code-name">.icon-chart-pie-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clouddownload"></span>
            <div class="name">
              cloud download
            </div>
            <div class="code-name">.icon-clouddownload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudupload"></span>
            <div class="name">
              cloud upload
            </div>
            <div class="code-name">.icon-cloudupload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exchange"></span>
            <div class="name">
              exchange
            </div>
            <div class="code-name">.icon-exchange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ban"></span>
            <div class="name">
              ban
            </div>
            <div class="code-name">.icon-ban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-external-link"></span>
            <div class="name">
              external-link
            </div>
            <div class="code-name">.icon-external-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paperclip"></span>
            <div class="name">
              paperclip
            </div>
            <div class="code-name">.icon-paperclip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-connection"></span>
            <div class="name">
              connection
            </div>
            <div class="code-name">.icon-connection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-drag"></span>
            <div class="name">
              icon-drag
            </div>
            <div class="code-name">.icon-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share1"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share2"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-default-template"></span>
            <div class="name">
              默认
            </div>
            <div class="code-name">.icon-default-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-template-root-folder"></span>
            <div class="name">
              从模版库选择
            </div>
            <div class="code-name">.icon-template-root-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-response-template"></span>
            <div class="name">
              响应模版
            </div>
            <div class="code-name">.icon-response-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-recovery"></span>
            <div class="name">
              回收站
            </div>
            <div class="code-name">.icon-recovery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-models-store"></span>
            <div class="name">
              模型库
            </div>
            <div class="code-name">.icon-models-store
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-data-model"></span>
            <div class="name">
              数据模型
            </div>
            <div class="code-name">.icon-data-model
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-project-info"></span>
            <div class="name">
              项目
            </div>
            <div class="code-name">.icon-project-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fold-all2"></span>
            <div class="name">
              折叠全部
            </div>
            <div class="code-name">.icon-fold-all2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-expand-all2"></span>
            <div class="name">
              展开全部
            </div>
            <div class="code-name">.icon-expand-all2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-grpc"></span>
            <div class="name">
              grpc
            </div>
            <div class="code-name">.icon-grpc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-websocket"></span>
            <div class="name">
              websocket
            </div>
            <div class="code-name">.icon-websocket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-socket"></span>
            <div class="name">
              socket
            </div>
            <div class="code-name">.icon-socket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-web-socket"></span>
            <div class="name">
              web-socket
            </div>
            <div class="code-name">.icon-web-socket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-markdown-del"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.icon-markdown-del
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-socket-service"></span>
            <div class="name">
              Socket服务
            </div>
            <div class="code-name">.icon-socket-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-recycle"></span>
            <div class="name">
              回收站
            </div>
            <div class="code-name">.icon-recycle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-template"></span>
            <div class="name">
              组件-图标
            </div>
            <div class="code-name">.icon-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ui-test"></span>
            <div class="name">
              UI自动化测试
            </div>
            <div class="code-name">.icon-ui-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-history"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notes"></span>
            <div class="name">
              笔记
            </div>
            <div class="code-name">.icon-notes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-branches"></span>
            <div class="name">
              分支管理
            </div>
            <div class="code-name">.icon-branches
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-api-manage"></span>
            <div class="name">
              接口管理
            </div>
            <div class="code-name">.icon-api-manage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-proxy"></span>
            <div class="name">
              代理
            </div>
            <div class="code-name">.icon-proxy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-project-settings"></span>
            <div class="name">
              项目管理
            </div>
            <div class="code-name">.icon-project-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-auto-test"></span>
            <div class="name">
              自动化测试
            </div>
            <div class="code-name">.icon-auto-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share-manage"></span>
            <div class="name">
              分享管理
            </div>
            <div class="code-name">.icon-share-manage
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-script"></use>
                </svg>
                <div class="name">脚本</div>
                <div class="code-name">#icon-script</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link2"></use>
                </svg>
                <div class="name">link2</div>
                <div class="code-name">#icon-link2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlink2"></use>
                </svg>
                <div class="name">unlink2</div>
                <div class="code-name">#icon-unlink2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link-data"></use>
                </svg>
                <div class="name">link-data</div>
                <div class="code-name">#icon-link-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-expand-all"></use>
                </svg>
                <div class="name">全部展开</div>
                <div class="code-name">#icon-expand-all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fold-all"></use>
                </svg>
                <div class="name">全部收起</div>
                <div class="code-name">#icon-fold-all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kefu"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-kefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-offline"></use>
                </svg>
                <div class="name">脱机</div>
                <div class="code-name">#icon-offline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-socket-io"></use>
                </svg>
                <div class="name">socket-io</div>
                <div class="code-name">#icon-socket-io</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-test-case"></use>
                </svg>
                <div class="name">测试用例</div>
                <div class="code-name">#icon-test-case</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loop"></use>
                </svg>
                <div class="name">循环</div>
                <div class="code-name">#icon-loop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wait"></use>
                </svg>
                <div class="name">等待</div>
                <div class="code-name">#icon-wait</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-group"></use>
                </svg>
                <div class="name">分组</div>
                <div class="code-name">#icon-group</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-if"></use>
                </svg>
                <div class="name">条件</div>
                <div class="code-name">#icon-if</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-backspace"></use>
                </svg>
                <div class="name">backspace</div>
                <div class="code-name">#icon-backspace</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-export"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rename"></use>
                </svg>
                <div class="name">重命名</div>
                <div class="code-name">#icon-rename</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markdown"></use>
                </svg>
                <div class="name">markdown</div>
                <div class="code-name">#icon-markdown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markdown2"></use>
                </svg>
                <div class="name">markdown</div>
                <div class="code-name">#icon-markdown2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-add"></use>
                </svg>
                <div class="name">添加目录</div>
                <div class="code-name">#icon-folder-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-move"></use>
                </svg>
                <div class="name">移动文件</div>
                <div class="code-name">#icon-folder-move</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy1"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-copy1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">重命名</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-import-project"></use>
                </svg>
                <div class="name">导入项目</div>
                <div class="code-name">#icon-import-project</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-http"></use>
                </svg>
                <div class="name">http接口</div>
                <div class="code-name">#icon-http</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-import-curl"></use>
                </svg>
                <div class="name">导入curl</div>
                <div class="code-name">#icon-import-curl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-team2"></use>
                </svg>
                <div class="name">部门</div>
                <div class="code-name">#icon-team2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-api1"></use>
                </svg>
                <div class="name">api</div>
                <div class="code-name">#icon-api1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-project-role"></use>
                </svg>
                <div class="name">项目权限</div>
                <div class="code-name">#icon-project-role</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-invite"></use>
                </svg>
                <div class="name">邀请</div>
                <div class="code-name">#icon-invite</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-transfer"></use>
                </svg>
                <div class="name">转移</div>
                <div class="code-name">#icon-transfer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-team"></use>
                </svg>
                <div class="name">团队</div>
                <div class="code-name">#icon-team</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-developer"></use>
                </svg>
                <div class="name">开发者</div>
                <div class="code-name">#icon-developer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-administrator"></use>
                </svg>
                <div class="name">超级管理员</div>
                <div class="code-name">#icon-administrator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-visitor"></use>
                </svg>
                <div class="name">访客</div>
                <div class="code-name">#icon-visitor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-project"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-project</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-project-doc"></use>
                </svg>
                <div class="name">项目文档</div>
                <div class="code-name">#icon-project-doc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quick-share"></use>
                </svg>
                <div class="name">快捷分享</div>
                <div class="code-name">#icon-quick-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link-off"></use>
                </svg>
                <div class="name">取消链接</div>
                <div class="code-name">#icon-link-off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link"></use>
                </svg>
                <div class="name">超链接</div>
                <div class="code-name">#icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-database"></use>
                </svg>
                <div class="name">数据库</div>
                <div class="code-name">#icon-database</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-api"></use>
                </svg>
                <div class="name">接口</div>
                <div class="code-name">#icon-api</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-auto-test2"></use>
                </svg>
                <div class="name">自动化测试</div>
                <div class="code-name">#icon-auto-test2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloud-link"></use>
                </svg>
                <div class="name">云端链接</div>
                <div class="code-name">#icon-cloud-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flash-auto"></use>
                </svg>
                <div class="name">自动生成</div>
                <div class="code-name">#icon-flash-auto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-okay"></use>
                </svg>
                <div class="name">正确</div>
                <div class="code-name">#icon-okay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-format"></use>
                </svg>
                <div class="name">格式化</div>
                <div class="code-name">#icon-format</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clone"></use>
                </svg>
                <div class="name">克隆</div>
                <div class="code-name">#icon-clone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-enviroment"></use>
                </svg>
                <div class="name">环境变量</div>
                <div class="code-name">#icon-enviroment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhedie"></use>
                </svg>
                <div class="name">折叠</div>
                <div class="code-name">#icon-zhedie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxianguanli"></use>
                </svg>
                <div class="name">权限管理</div>
                <div class="code-name">#icon-quanxianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clear"></use>
                </svg>
                <div class="name">清空</div>
                <div class="code-name">#icon-clear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-modify"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-modify</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ca2"></use>
                </svg>
                <div class="name">CA证书</div>
                <div class="code-name">#icon-ca2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ca1"></use>
                </svg>
                <div class="name">CA证书</div>
                <div class="code-name">#icon-ca1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-checked"></use>
                </svg>
                <div class="name">checked</div>
                <div class="code-name">#icon-checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-packet-capture"></use>
                </svg>
                <div class="name">抓包</div>
                <div class="code-name">#icon-packet-capture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plane2"></use>
                </svg>
                <div class="name">纸飞机</div>
                <div class="code-name">#icon-plane2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shortcut"></use>
                </svg>
                <div class="name">快捷键</div>
                <div class="code-name">#icon-shortcut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skins"></use>
                </svg>
                <div class="name">16_外观设置</div>
                <div class="code-name">#icon-skins</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-certificate"></use>
                </svg>
                <div class="name">安全证书</div>
                <div class="code-name">#icon-certificate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings3"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-settings3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plugins"></use>
                </svg>
                <div class="name">插件管理</div>
                <div class="code-name">#icon-plugins</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-vertical"></use>
                </svg>
                <div class="name">上下分屏</div>
                <div class="code-name">#icon-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-horizontal"></use>
                </svg>
                <div class="name">左右分屏</div>
                <div class="code-name">#icon-horizontal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cookies"></use>
                </svg>
                <div class="name">Cookies</div>
                <div class="code-name">#icon-cookies</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-terminal"></use>
                </svg>
                <div class="name">控制台</div>
                <div class="code-name">#icon-terminal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-directory"></use>
                </svg>
                <div class="name">目录</div>
                <div class="code-name">#icon-directory</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-double-down"></use>
                </svg>
                <div class="name">angle- double-down</div>
                <div class="code-name">#icon-angle-double-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-double-up"></use>
                </svg>
                <div class="name">angle-double-up</div>
                <div class="code-name">#icon-angle-double-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-double-right"></use>
                </svg>
                <div class="name">angle-double-right</div>
                <div class="code-name">#icon-angle-double-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-double-left"></use>
                </svg>
                <div class="name">angle-double-left</div>
                <div class="code-name">#icon-angle-double-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dictionary"></use>
                </svg>
                <div class="name">数据字典</div>
                <div class="code-name">#icon-dictionary</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-network"></use>
                </svg>
                <div class="name">网络</div>
                <div class="code-name">#icon-network</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-save2"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-save2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-key"></use>
                </svg>
                <div class="name">权限管理</div>
                <div class="code-name">#icon-key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plane"></use>
                </svg>
                <div class="name">plane</div>
                <div class="code-name">#icon-plane</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sort"></use>
                </svg>
                <div class="name">icon-drag</div>
                <div class="code-name">#icon-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-down"></use>
                </svg>
                <div class="name">angle-down</div>
                <div class="code-name">#icon-angle-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-up"></use>
                </svg>
                <div class="name">angle-up</div>
                <div class="code-name">#icon-angle-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-right"></use>
                </svg>
                <div class="name">angle-right</div>
                <div class="code-name">#icon-angle-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-angle-left"></use>
                </svg>
                <div class="name">angle-left</div>
                <div class="code-name">#icon-angle-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-slash"></use>
                </svg>
                <div class="name">eye-slash</div>
                <div class="code-name">#icon-eye-slash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye"></use>
                </svg>
                <div class="name">眼睛</div>
                <div class="code-name">#icon-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#icon-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emphasize"></use>
                </svg>
                <div class="name">强调</div>
                <div class="code-name">#icon-emphasize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus"></use>
                </svg>
                <div class="name">减少</div>
                <div class="code-name">#icon-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart-pie-alt"></use>
                </svg>
                <div class="name">chart-pie-alt</div>
                <div class="code-name">#icon-chart-pie-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clouddownload"></use>
                </svg>
                <div class="name">cloud download</div>
                <div class="code-name">#icon-clouddownload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudupload"></use>
                </svg>
                <div class="name">cloud upload</div>
                <div class="code-name">#icon-cloudupload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exchange"></use>
                </svg>
                <div class="name">exchange</div>
                <div class="code-name">#icon-exchange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ban"></use>
                </svg>
                <div class="name">ban</div>
                <div class="code-name">#icon-ban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-external-link"></use>
                </svg>
                <div class="name">external-link</div>
                <div class="code-name">#icon-external-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paperclip"></use>
                </svg>
                <div class="name">paperclip</div>
                <div class="code-name">#icon-paperclip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-connection"></use>
                </svg>
                <div class="name">connection</div>
                <div class="code-name">#icon-connection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drag"></use>
                </svg>
                <div class="name">icon-drag</div>
                <div class="code-name">#icon-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share1"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share2"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-default-template"></use>
                </svg>
                <div class="name">默认</div>
                <div class="code-name">#icon-default-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-template-root-folder"></use>
                </svg>
                <div class="name">从模版库选择</div>
                <div class="code-name">#icon-template-root-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-response-template"></use>
                </svg>
                <div class="name">响应模版</div>
                <div class="code-name">#icon-response-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recovery"></use>
                </svg>
                <div class="name">回收站</div>
                <div class="code-name">#icon-recovery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-models-store"></use>
                </svg>
                <div class="name">模型库</div>
                <div class="code-name">#icon-models-store</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-data-model"></use>
                </svg>
                <div class="name">数据模型</div>
                <div class="code-name">#icon-data-model</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-project-info"></use>
                </svg>
                <div class="name">项目</div>
                <div class="code-name">#icon-project-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fold-all2"></use>
                </svg>
                <div class="name">折叠全部</div>
                <div class="code-name">#icon-fold-all2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-expand-all2"></use>
                </svg>
                <div class="name">展开全部</div>
                <div class="code-name">#icon-expand-all2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-grpc"></use>
                </svg>
                <div class="name">grpc</div>
                <div class="code-name">#icon-grpc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-websocket"></use>
                </svg>
                <div class="name">websocket</div>
                <div class="code-name">#icon-websocket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-socket"></use>
                </svg>
                <div class="name">socket</div>
                <div class="code-name">#icon-socket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-web-socket"></use>
                </svg>
                <div class="name">web-socket</div>
                <div class="code-name">#icon-web-socket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-markdown-del"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#icon-markdown-del</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-socket-service"></use>
                </svg>
                <div class="name">Socket服务</div>
                <div class="code-name">#icon-socket-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-recycle"></use>
                </svg>
                <div class="name">回收站</div>
                <div class="code-name">#icon-recycle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-template"></use>
                </svg>
                <div class="name">组件-图标</div>
                <div class="code-name">#icon-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ui-test"></use>
                </svg>
                <div class="name">UI自动化测试</div>
                <div class="code-name">#icon-ui-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-history"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notes"></use>
                </svg>
                <div class="name">笔记</div>
                <div class="code-name">#icon-notes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-branches"></use>
                </svg>
                <div class="name">分支管理</div>
                <div class="code-name">#icon-branches</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-api-manage"></use>
                </svg>
                <div class="name">接口管理</div>
                <div class="code-name">#icon-api-manage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-proxy"></use>
                </svg>
                <div class="name">代理</div>
                <div class="code-name">#icon-proxy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-project-settings"></use>
                </svg>
                <div class="name">项目管理</div>
                <div class="code-name">#icon-project-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-auto-test"></use>
                </svg>
                <div class="name">自动化测试</div>
                <div class="code-name">#icon-auto-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-manage"></use>
                </svg>
                <div class="name">分享管理</div>
                <div class="code-name">#icon-share-manage</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
